<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>订单添加</title>
<link href ="assets/css/.bootstrap.min.css" rel ="stylesheet"/>
<link rel ="stylesheet" href ="assets/css/font-awesome.min.css"/>
<!-- [if IE 7]>
<link rel ="stylesheet"  href ="assets/css/font-awesome-ie7.min,css"/>
<![endif]-->
 <link rel="styesheet"href ="assets/css/ace.min.css"/>
 <link rel="styesheet"href ="assets/css/ace.min.css"/>
 <link rel="styesheet"href="assets/css/ace-skins.min.css"/>
 <link rel="styesheet"href="text/css"href="css/style.css"/>
 <style type="text/css">
     body{
        padding:15px 20px;
     }   
     #sample-table img{
     width:100px;
     height:60px;
     }  
     .pay_info li{
        text-align:right;
        font-size:20px;
        font-family:kaiTi;
     }
     .search{
        margin-bottom:25px;
     } 
     .btn_search{
       height:32px;
       background:#2a8bcc!important;
       background-image: linear-gradient(to bottom,#3b98d6 0,#197ec1 100%)!important;
       background-repeat:repeat-x!important;
       line-height:32px;
       border:0px;
       width:60px;
       text-align: center;
       color:#FFF;
       margin-left:50px;
     }     
     .shopping _trolley h1{
       color:red;
       font-weight:900;
       font-family:KaiTi;
       margin-bottom:20px;
     }   
      .disshesList {
        width:1200px;
        margin:0 auto;
        margin-bottom:50px;
        height:380px;
        overflow:scroll;
      }     
     .disshesList li {
       float:left;
       border:2px solid #9f9f9f;
       padding:3px;
       font-size: 16px;
       text-align:center;
       cursor:pointer;
       margin:3px;
     }
     .disshesList li img{
       width:150;
       height:120px;
     }
      .disshesList li  div{
        margin:5px 0;
      }
 </style> 
</head>
<body>
       <div class="search">
       <span>订单：</span>
       <input type="text"placeholder="请输入要检索的订单号">
       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
       <label class="label_name">请选择订单菜品类别：</label>
                 <select class="tid" id="tid" name="tid">
                  <option value="">选择分类：</option>
                  <option value="1">凉菜</option>
                  <option value="2">炒菜</option>
                  <option value="3">烧菜</option>
                  <option value="4">炖菜</option>
                  <option value="5">清蒸</option>
                  <option value="6">小吃</option>
                  <option value="7">甜品</option>
                  <option value="8">饮品</option>
                 </select>
               
       <button class="btn_search">
           <i class="icon-search"></i>
           搜索
       </button>
</div>
        <!-- 菜品列表展示 -->
        <div class="dissheslist">
          <ul>
            <li>
              <img src="images/dishes/tudou.jpg">    
              <div>天蚕土豆</div>
               <div>
                 <span>￥<del>19.9</del></span>
                 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                 <span>￥<b>9.9</b></span>
               </div>     
            </li>
            <li>
              <img src="images/dishes/tudou.jpg">    
              <div>天蚕土豆</div>
               <div>
                 <span>￥<del>19.9</del></span>
                 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                 <span>￥<b>9.9</b></span>
               </div>     
            </li><li>
              <img src="images/dishes/tudou.jpg">    
              <div>天蚕土豆</div>
               <div>
                 <span>￥<del>19.9</del></span>
                 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                 <span>￥<b>9.9</b></span>
               </div>     
            </li><li>
              <img src="images/dishes/tudou.jpg">    
              <div>天蚕土豆</div>
               <div>
                 <span>￥<del>19.9</del></span>
                 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                 <span>￥<b>9.9</b></span>
               </div>     
            </li><li>
              <img src="images/dishes/tudou.jpg">    
              <div>天蚕土豆</div>
               <div>
                 <span>￥<del>19.9</del></span>
                 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                 <span>￥<b>9.9</b></span>
               </div>     
            </li><li>
              <img src="images/dishes/tudou.jpg">    
              <div>天蚕土豆</div>
               <div>
                 <span>￥<del>19.9</del></span>
                 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                 <span>￥<b>9.9</b></span>
               </div>     
            </li><li>
              <img src="images/dishes/tudou.jpg">    
              <div>天蚕土豆</div>
               <div>
                 <span>￥<del>19.9</del></span>
                 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                 <span>￥<b>9.9</b></span>
               </div>     
            </li><li>
              <img src="images/dishes/tudou.jpg">    
              <div>天蚕土豆</div>
               <div>
                 <span>￥<del>19.9</del></span>
                 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                 <span>￥<b>9.9</b></span>
               </div>     
            </li><li>
              <img src="images/dishes/tudou.jpg">    
              <div>天蚕土豆</div>
               <div>
                 <span>￥<del>19.9</del></span>
                 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                 <span>￥<b>9.9</b></span>
               </div>     
            </li><li>
              <img src="images/dishes/tudou.jpg">    
              <div>天蚕土豆</div>
               <div>
                 <span>￥<del>19.9</del></span>
                 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                 <span>￥<b>9.9</b></span>
               </div>     
            </li><li>
              <img src="images/dishes/tudou.jpg">    
              <div>天蚕土豆</div>
               <div>
                 <span>￥<del>19.9</del></span>
                 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                 <span>￥<b>9.9</b></span>
               </div>     
            </li>
          </ul>
        </div>
        <!-- 购物车 -->
        <div class="shopping _trolley">
        <h1>购物车</h1>
        <div class="sample-table_wrapper" class="dataTables_wrapper no-footer">    
          <table class="table table-striped table-bordered table-hover dataTable no-footer"
          id="sample-table" role="grid"aria-deacridedby="sample-table_info">
          <thead>
          <tr role="row">
                    <th><input type="checkbox" class="sab" name="select" value="0"></th>
                    <th><span>菜品名</span><th>
                    <th><span>菜品分类</span><th>
                    <th><span>图片</span><th>
                    <th><span>原价</span><th>
                    <th><span>现价</span><th>
                    <th><span>备注</span><th>
                    <th><span>操作</span><th>
                 </th>
               </thead>
               <tbody>
                    <tr>
                        <td><input type="checkbox" class="sab"></td>
                        <td><span>天蚕土豆</span></td>
                        <td><span>小吃</span></td>
                        <td><img src="images/dishes/tudou.jpg">
                        <td><span>19.9</span></td>       
                        <td><span>9.9</span></td>
                        <td><span>推荐：麻辣口味</span></td> 
                        <td>
                             <a title ="移除" href ="javascript:" class="bth bth-xs bth-warning">
                                 <i class ="icon-trash bigger-120"></i>
                             </a>
                          </td>
                        </tr>
                        <tr>
                              <td><input type ="checkbox" class ="sab"></td>
                              <td><span>100001</span></td>
                              <td><span>天蚕土豆</span></td>
                              <td><span>小吃</span></td>
                              <td><img src="images/dishes/tudou.jpg">
                              <td><span>19.9</span></td>       
                              <td><span>9.9</span></td>
                              <td><span>推荐：麻辣口味</span></td>   
                          <td>   
                          <a title ="编辑" href ="javascript:" class="bth bth-xs bth-warning">
                                 <i class ="icon-trash bigger-120"></i>
                             </a>
                             <a title ="删除" href ="javascript:" class="bth bth-xs bth-warning">
                                 <i class ="icon-trash bigger-120"></i>
                             </a>
                          </td>                         
                          </tr>
                        <tr>
                              <td><input type ="checkbox" class ="sab"></td>
                              <td><span>100001</span></td>
                              <td><span>天蚕土豆</span></td>
                              <td><span>小吃</span></td>
                              <td><img src="images/dishes/tudou.jpg">
                              <td><span>19.9</span></td>       
                              <td><span>9.9</span></td>
                              <td><span>推荐：麻辣口味</span></td>   
                          <td>   
                          <a title ="编辑" href ="javascript:" class="bth bth-xs bth-warning">
                                 <i class ="icon-trash bigger-120"></i>
                             </a>
                          </td>                         
                          </tr>
             </tbody>
            </table>
           </div>
          <div class=".pay-info">
           <ul>
             <li> 
                    <label class="label_name">总价： </label>
                    <span class="cont_style" id ="total_prices">￥<del>456.00</del></span>
                    </li>
             <li> 
                    <label class="label_name">折扣后： </label>
                    <span class="cont_style" id ="total_prices">￥431.00</span>
                    </li>  
             <li> 
                    <label class="label_name"> 支付 </label>
                    <button type ="submit" class ="bth"> 支付 </button>
                    </li>
            </ul>
            </div>
       </div>
</body>
</html>